
<template>
  <div>


    <Row>
      <i-col>
        <Form ref="tabParam" :model="tabParam" label-position="right" inline>
          <Row>
            <i-col>
              <FormItem label="箱号：">
                <Input type="text" v-model="tabParam.containerNo" placeholder="请输入箱号"></Input>
              </FormItem>
              <FormItem label="车号：">
                <Input type="text" v-model="tabParam.trainNumber" placeholder="请输入车号"></Input>
              </FormItem>
              <FormItem label="预警:">
                <RadioGroup v-model="tabParam.warning">
                  <Radio label="">全部</Radio>
                  <Radio label="1">超时</Radio>
                  <Radio label="0">未超时</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem style="float:right;">
                <Button type="primary" @click="handleSearch" icon="ios-search">
                  搜索
                </Button>
              </FormItem>
            </i-col>
          </Row>
        </Form>
      </i-col>
    </Row>
    <!-- 超量警告 2018/8/14 zhangQ -->
    <Tabs v-model="tabParam.type" @on-click="switchTab">
      <template v-for="item in tabList">
        <TabPane :label="item.label" :name="item.val"></TabPane>
      </template>
    </Tabs>


    <tablePage ref="overTimeWarningRef" :api="getTimeWarningList" v-if="tabParam.type==tabList[0].val" :param="tabParam">
      <template slot-scope="props">
        <Table :columns="overTimeWarningColumn1" :data="props.data"></Table>
      </template>
    </tablePage>

    <tablePage ref="overTimeWarningRef" :api="getTimeWarningList" v-if="tabParam.type==tabList[1].val" :param="tabParam">
      <template slot-scope="props">
        <Table :columns="overTimeWarningColumn2" :data="props.data"></Table>
      </template>
    </tablePage>

    <tablePage ref="overTimeWarningRef" :api="getTimeWarningList" v-if="tabParam.type==tabList[2].val" :param="tabParam">
      <template slot-scope="props">
        <Table :columns="overTimeWarningColumn3" :data="props.data"></Table>
      </template>
    </tablePage>


    <xlinkModal v-model="operatModal.trackingShow" title="轨迹查看" width="960">
      <overTimeTrackingShow v-if="operatModal.trackingShow" :subOrder="mainOrderCurrentRow"></overTimeTrackingShow>
    </xlinkModal>
  </div>
</template>

<script>
  import tablePage from '@components/table/tablePage.vue'
  import {getTimeWarningList} from '@api/containerPlatform/containerManagement'
  import xlinkModal from '@components/modal/xlinkModal'
  import overTimeTrackingShow from './components/overTimeTrackingShow'
  import moment from 'moment'

  export default {
    name: 'overTimeWarning',
    data () {
      let operatModal = {trackingShow: false}
      let tabList = [
        {
          label: '发站作业',
          val: '1'
        },
        {
          label: '运输中',
          val: '2'
        },
        {
          label: '到站作业',
          val: '3'
        }
      ]
      let tabParam = {
        type: tabList[0].val
      }
      let overTimeWarningColumn1 = [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '箱号',
          key: 'containerNo',
          align: 'center',
          width: 200
        },
        {
          title: '车号',
          key: 'trainNumber',
          align: 'center',
          width: 100
        },
        {
          title: '发到站',
          width: 200,
          align: 'center',
          render: (h, params) => {
            let station = params.row.sendStationName + '-' + params.row.endStationName
            return (<span>{station}</span>)
          }
        },
        {
          title: '接取时间',
          width: 200,
          align: 'center',
          render: (h, params) => {
            let thisdata = params.row.pickUpTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '预警',
          width: 200,
          render: (h, params) => {
            let spanCN = ''
            if (+this.tabParam.type === 1) {
              let timeOut = params.row.pickTimeOut + params.row.outLineTimeOut + params.row.loadTimeOut + params.row.waitDeliverTimeOut
              if (timeOut > 0) {
                spanCN = (<span style="color:#F92210">超时{timeOut}小时
                  <icon type="arrow-up-a"></icon></span>)
              } else {
                spanCN = (<span>未超时</span>)
              }
            } else if (+this.tabParam.type === 2) {
              let timeOut = params.row.transportTimeOut
              if (timeOut > 0) {
                spanCN = (<span style="color:#F92210">超时{timeOut}小时
                  <icon type="arrow-up-a"></icon></span>)
              } else {
                spanCN = (<span>未超时</span>)
              }
            } else if (+this.tabParam.type === 3) {
              let timeOut = params.row.waitSendTimeOut + params.row.waitUnloadTimeOut + params.row.unloadTimeOut + params.row.outStationTimeOut + params.row.sendFinishTimeOut
              if (timeOut > 0) {
                spanCN = (<span style="color:#F92210">超时{timeOut}小时
                  <icon type="arrow-up-a"></icon></span>)
              } else {
                spanCN = (<span>未超时</span>)
              }
            }
            return (spanCN)
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          minWidth: 200,
          fixed: 'right',
          render: (h, params) => {
            return (<i-button type="dashed" onClick={() => this.overTimeTracking(params.row)}>动态</i-button>)
          }
        }
      ]
      let overTimeWarningColumn2 = [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '箱号',
          key: 'containerNo',
          align: 'center',
          width: 200
        },
        {
          title: '车号',
          key: 'trainNumber',
          align: 'center',
          width: 100
        },
        {
          title: '发到站',
          width: 200,
          align: 'center',
          render: (h, params) => {
            let station = params.row.sendStationName + '-' + params.row.endStationName
            return (<span>{station}</span>)
          }
        },
        // {
        //   title: '接取时间',
        //   width: 200,
        //   align: 'center',
        //   render: (h, params) => {
        //     let thisdata = params.row.pickUpTime
        //     thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
        //     return (<span>{thisdata}</span>)
        //   }
        // },
        {
          title: '预警',
          width: 200,
          render: (h, params) => {
            let spanCN = ''
            if (+this.tabParam.type === 1) {
              let timeOut = params.row.pickTimeOut + params.row.outLineTimeOut + params.row.loadTimeOut + params.row.waitDeliverTimeOut
              if (timeOut > 0) {
                spanCN = (<span style="color:#F92210">超时{timeOut}小时
                  <icon type="arrow-up-a"></icon></span>)
              } else {
                spanCN = (<span>未超时</span>)
              }
            } else if (+this.tabParam.type === 2) {
              let timeOut = params.row.transportTimeOut
              if (timeOut > 0) {
                spanCN = (<span style="color:#F92210">超时{timeOut}小时
                  <icon type="arrow-up-a"></icon></span>)
              } else {
                spanCN = (<span>未超时</span>)
              }
            } else if (+this.tabParam.type === 3) {
              let timeOut = params.row.waitSendTimeOut + params.row.waitUnloadTimeOut + params.row.unloadTimeOut + params.row.outStationTimeOut + params.row.sendFinishTimeOut
              if (timeOut > 0) {
                spanCN = (<span style="color:#F92210">超时{timeOut}小时
                  <icon type="arrow-up-a"></icon></span>)
              } else {
                spanCN = (<span>未超时</span>)
              }
            }
            return (spanCN)
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          minWidth: 200,
          fixed: 'right',
          render: (h, params) => {
            return (<i-button type="dashed" onClick={() => this.overTimeTracking(params.row)}>动态</i-button>)
          }
        }
      ]
      let overTimeWarningColumn3 = [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '箱号',
          key: 'containerNo',
          align: 'center',
          width: 200
        },
        {
          title: '车号',
          key: 'trainNumber',
          align: 'center',
          width: 100
        },
        {
          title: '发到站',
          width: 200,
          align: 'center',
          render: (h, params) => {
            let station = params.row.sendStationName + '-' + params.row.endStationName
            return (<span>{station}</span>)
          }
        },
        {
          title: '送达时间',
          width: 200,
          align: 'center',
          render: (h, params) => {
            let thisdata = params.row.pickUpTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '预警',
          width: 200,
          render: (h, params) => {
            let spanCN = ''
            if (+this.tabParam.type === 1) {
              let timeOut = params.row.pickTimeOut + params.row.outLineTimeOut + params.row.loadTimeOut + params.row.waitDeliverTimeOut
              if (timeOut > 0) {
                spanCN = (<span style="color:#F92210">超时{timeOut}小时
                  <icon type="arrow-up-a"></icon></span>)
              } else {
                spanCN = (<span>未超时</span>)
              }
            } else if (+this.tabParam.type === 2) {
              let timeOut = params.row.transportTimeOut
              if (timeOut > 0) {
                spanCN = (<span style="color:#F92210">超时{timeOut}小时
                  <icon type="arrow-up-a"></icon></span>)
              } else {
                spanCN = (<span>未超时</span>)
              }
            } else if (+this.tabParam.type === 3) {
              let timeOut = params.row.waitSendTimeOut + params.row.waitUnloadTimeOut + params.row.unloadTimeOut + params.row.outStationTimeOut + params.row.sendFinishTimeOut
              if (timeOut > 0) {
                spanCN = (<span style="color:#F92210">超时{timeOut}小时
                  <icon type="arrow-up-a"></icon></span>)
              } else {
                spanCN = (<span>未超时</span>)
              }
            }
            return (spanCN)
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          minWidth: 200,
          fixed: 'right',
          render: (h, params) => {
            return (<i-button type="dashed" onClick={() => this.overTimeTracking(params.row)}>动态</i-button>)
          }
        }
      ]
      let mainOrderCurrentRow = []
      let data = {getTimeWarningList, tabList, tabParam, overTimeWarningColumn1, overTimeWarningColumn2, overTimeWarningColumn3, operatModal, mainOrderCurrentRow}
      return data
    },
    computed: {},
    methods: {
      handleSearch () {
        // this.$refs['overTimeWarningRef1'].dataRefresh()
        // this.$refs['overTimeWarningRef2'].dataRefresh()
        // this.$refs['overTimeWarningRef3'].dataRefresh()
        this.$refs['overTimeWarningRef'].dataRefresh()
      },
      overTimeTracking (row) {
        this.operatModal.trackingShow = true
        row.type = this.tabParam.type
        console.log(row)
        this.mainOrderCurrentRow = row
      },
      switchTab () {
        if (+this.tabParam.type === 1) {
          // this.lableName = '车队'
          // this.selectList = this.fleetSelectList
          // this.$refs['overTimeWarningRef1'].dataRefresh()
        } else if (+this.tabParam.type === 2) {
          // this.$refs['overTimeWarningRef2'].dataRefresh()
          // this.lableName = '司机/手机号'
          // this.selectList = this.driverSelectList
        } else if (+this.tabParam.type === 3) {
          // this.$refs['overTimeWarningRef3'].dataRefresh()
          // this.lableName = '车牌号'
          // this.selectList = this.truckSelectList
        }
        // this.$nextTick(() => {
        //   this.dataRefresh()
        // })
        this.handleSearch()
      }
    },
    watch: {
      // tabParam: {
      //   handler: function (val, oldVal) {
      //     let stationTime = {}
      //     if (val.type === '1') {
      //       stationTime = {
      //         title: '接取时间',
      //         width: 200,
      //         align: 'center',
      //         render: (h, params) => {
      //           let thisdata = params.row.pickUpTime
      //           thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
      //           return (<span>{thisdata}</span>)
      //         }
      //       }
      //       this.overTimeWarningColumn.splice(4, 1, stationTime)
      //     } else if (val.type === '2') {
      //       this.overTimeWarningColumn.splice(4, 1)
      //     } else if (val.type === '3') {
      //       stationTime = {
      //         title: '送达时间',
      //         width: 200,
      //         align: 'center',
      //         render: (h, params) => {
      //           let thisdata = params.row.endStationTime
      //           thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
      //           return (<span>{thisdata}</span>)
      //         }
      //       }
      //       this.overTimeWarningColumn.splice(4, 1, stationTime)
      //     }
      //     this.$refs['overTimeWarningRef'].dataRefresh()
      //   },
      //   deep: true
      // }
    },
    created () {
    },
    mounted () {
    },
    components: {tablePage, xlinkModal, overTimeTrackingShow}
  }
</script>

<style scoped>

</style>
